<template>
	<view>

		<u-form label-width="150rpx" style="padding: 50rpx 20rpx 20rpx 20rpx;">
			<view class="inner-wrap">
				<view class="u-icon-item" 
				v-for="(item, index) in headImgList" :key="index" @click="changeImg(item)">
					<u-avatar :src="item" size="140" style="border:3px solid #18b566"></u-avatar>
					<u-icon :class="img === item ? 'check-icon' : 'uncheck-icon'" class="check-icon" name="checkmark-circle-fill"></u-icon>
				</view>
			</view>
			<view style="padding-left: 40rpx;">
			<u-form-item label="昵称"><u-input v-model="userName" placeholder="请输入昵称" /></u-form-item>
			<u-form-item label="手机号"><u-input v-model="phone" placeholder="请输入手机号" disabled/></u-form-item>
			<u-form-item label="密码"><u-input v-model="passWord" placeholder="请输入密码,不修改不必输入"/></u-form-item>
			</view>
		</u-form>
		<u-row gutter="16" style="padding: 10rpx 10rpx 60rpx 10rpx;" >
			<u-col span="2">
				<span>&nbsp;</span>
			</u-col>
			<u-col span="3">
				<u-button type="info" size="medium" @click="canel">返回</u-button>
			</u-col>
			<u-col span="2">
				<span>&nbsp;</span>
			</u-col>
			<u-col span="3">
				<u-button type="primary" size="medium" @click="save">保存</u-button>
			</u-col>
			<u-col span="2">
				<span>&nbsp;</span>
			</u-col>
		</u-row>

		
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone : "",
				passWord : "",
				userName: "",
				img: "",
			}
		},
		onShow(){
			this.phone = this.myConfig.phone;
			this.userName = this.myConfig.userName;
			this.img = this.myConfig.img;
		},
		methods:{
			// 注册
			save(){
				if(this.phone === "" || this.phone === null || this.phone === undefined){
					this.$refs.uToast.show({
						title: '请输入手机号',
						type: 'error'
					});
					return;
				}
				if(this.passWord === "" || this.passWord === null || this.passWord === undefined){
					
				}
				this.$u.post('/ledger/member/update', {
								userId:this.myConfig.userId,
								userName: this.userName,
								phone: this.phone,
								img: this.img,
								passWord: this.passWord === "" || this.passWord === null || this.passWord === undefined ? null : this.passWord
							}).then(data => {
								if (data && data.code === 0) {
									this.$u.vuex('myConfig.userName', this.userName);
									this.$u.vuex('myConfig.img', this.img);
									this.$u.vuex('myConfig.phone', this.phone);
									this.canel();
								} else {
									this.$refs.uToast.show({title: data.msg, type: 'error',});
								}
							}).catch((e) => {
								this.$refs.uToast.show({title: "手机好累哦^_^", type: 'error',});
							});

			},
			// 返回我的页面
			canel(){
				this.$u.route({
					url : '/pages/my/index',
					type: "tab"
				})
			},
			
			changeImg(item){
				this.img = item;
			}
		}
	}
</script>

<style>
	.inner-wrap {
		display: flex;
		flex-wrap: wrap;
	}
	.u-icon-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 190rpx;
		flex: 0 0 25%;
		justify-content: center;
		overflow: hidden;
	}
	.check-icon{
		font-size: 50rpx;
		color: #18B566;
		position: relative;
		left: 50rpx;
		bottom: 40rpx;
		z-index: 1000;
	}
	.uncheck-icon{
		font-size: 50rpx;
		color: #ffffff;
		position: relative;
		left: 50rpx;
		bottom: 40rpx;
		z-index: -1;
	}
</style>